<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数中arguments变量使用(function arguments variable practice)</title>
  <!-- 
  在 JavaScript 中， `arguments`  是一个类数组对象，包含传递给函数的所有参数。

  1. 基本概念： `arguments`  对象在函数内部可用，包含所有传递给函数的参数。
    function showArguments() {
      console.log(arguments);
    }
    showArguments(1, 'hello', true); // 输出: [1, 'hello', true]

  2. 访问参数：可以通过索引访问  `arguments`  中的参数。
    function displayFirstArgument() {
      console.log(arguments[0]);
    }
    displayFirstArgument('第一个', '第二个'); // 输出: '第一个'

  3. 参数数量：可以使用  `arguments.length`  属性获取传递给函数的参数数量。
    function countArguments() {
      console.log(arguments.length);
    }
    countArguments(1, 2, 3); // 输出: 3

  4. 与 Rest 参数的区别： `arguments`  是一个类数组对象，而 Rest 参数是一个真正的数组。Rest 参数的使用更现代和灵活。
    function exampleRest(...args) {
      console.log(args); // args 是一个数组
    }
    exampleRest(1, 2, 3); // 输出: [1, 2, 3]

  5. 使用场景： `arguments`  可以用于处理不定数量的参数，适合在需要灵活参数数量的函数中使用。
    function sum() {
      let total = 0;
      for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
      }
      return total;
    }
    console.log(sum(1, 2, 3, 4)); // 输出: 10

  总结表
| 特性                   | 描述                                   | 示例                                    |
|------------------------|----------------------------------------|-----------------------------------------|
| 基本概念               |  `arguments`  对象包含所有传递参数     |  `function showArguments() { ... }`      |
| 访问参数               | 通过索引访问  `arguments`  的参数      |  `console.log(arguments[0]);`            |
| 参数数量               | 使用  `arguments.length`  获取数量     |  `console.log(arguments.length);`        |
| 与 Rest 参数的区别     |  `arguments`  是类数组，Rest 是数组    |  `function exampleRest(...args) { ... }`  |
| 使用场景               | 处理不定数量的参数                    |  `function sum() { ... }`                |

   -->
</head>
<body>

  <script>
    // 1. arguments基本概念
    function showArguments(value1, value2, value3) {
      console.log("1. 访问参数", value1, value2);
      
      console.log("2. arguments基本概念", arguments);

      console.log("2.1 arguments类型", typeof arguments);
      // 对象内部包含了所有传入的参数
      // console.log(arguments[0])
      // console.log(arguments[1])
      // console.log(arguments[2])

      console.log("3. arguments参数数量", arguments.length);

      for (var i = 0; i < arguments.length; i++) {
        console.log("4. arguments访问参数", arguments[i]);
      }
    }
    showArguments(1, 2, 3); // 输出: [1, 2, 3]

    // 2. arguments使用场景
    function sum() {
      var result = 0;
      for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
      }
      return result;
    }
    console.log("arguments使用场景", sum(1, 2, 3, 4, 5)); // 输出: 15
  </script>
  
</body>
</html>